<template>
  <a-form class="w-full" auto-label-width v-if="filterOption">
    <a-form-item label="展示类型">
      <a-select size="small" v-model="filterOption.type">
        <a-option label="文本输入框" value="input" />
        <a-option label="下拉框" value="select" />
        <a-option label="日期选择器" value="date" />
      </a-select>
    </a-form-item>
    <template v-if="filterOption.type === 'input'">
      <a-form-item label="过滤条件">
        <a-input v-model="filterOption.filterCondition.value[0]" placeholder="请输入过滤条件" allow-clear>
          <template #prepend>
            <a-select
              style="width: 150px"
              v-model="filterOption.filterCondition.function[0]"
              placeholder="请选择过滤条件"
            >
              <a-option
                v-for="item in condition.STRING"
                :key="item.function"
                :value="item.function"
                :label="item.label"
              />
            </a-select>
          </template>
        </a-input>
        <!--        <template v-if="['2', '3'].includes(filterOption.filterForm)">-->
        <!--          <a-space direction="horizontal" align="center">-->
        <!--            <div>{{ filterOption.filterForm === "2" ? "或" : "且" }}</div>-->
        <!--            <a-space direction="vertical">-->
        <!--              <a-input v-model="filterOption.filterCondition.value[0]" placeholder="请输入过滤条件" allow-clear>-->
        <!--                <template #prepend>-->
        <!--                  <a-select v-model="filterOption.filterCondition.function[0]" placeholder="请选择过滤条件">-->
        <!--                    <a-option-->
        <!--                      v-for="item in condition.STRING"-->
        <!--                      :key="item.function"-->
        <!--                      :value="item.function"-->
        <!--                      :label="item.label"-->
        <!--                    />-->
        <!--                  </a-select>-->
        <!--                </template>-->
        <!--              </a-input>-->
        <!--              <a-input v-model="filterOption.filterCondition.value[1]" placeholder="请输入过滤条件" allow-clear>-->
        <!--                <template #prepend>-->
        <!--                  <a-select v-model="filterOption.filterCondition.function[1]" placeholder="请选择过滤条件">-->
        <!--                    <a-option-->
        <!--                      v-for="item in condition.STRING"-->
        <!--                      :key="item.function"-->
        <!--                      :value="item.function"-->
        <!--                      :label="item.label"-->
        <!--                    />-->
        <!--                  </a-select>-->
        <!--                </template>-->
        <!--              </a-input>-->
        <!--            </a-space>-->
        <!--          </a-space>-->
        <!--        </template>-->
      </a-form-item>
    </template>
    <template v-if="filterOption.type === 'select'">
      <a-form-item label="展示类型">
        <a-radio-group v-model="filterOption.filterForm">
          <a-radio value="1">单选</a-radio>
          <a-radio value="2">多选</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="过滤条件" help="获取枚举根据数据大小，可能会查询时间较长，请耐心等待">
        <a-space>
          <template v-if="['1'].includes(filterOption.filterForm)">
            <a-select
              style="width: 180px"
              v-model="filterOption.filterCondition.value[0]"
              placeholder="请选择过滤值"
              allow-clear
              allow-search
            >
              <a-option
                v-for="item in filterOption.enum.content"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              />
            </a-select>
          </template>
          <template v-if="['2'].includes(filterOption.filterForm)">
            <a-space direction="vertical">
              <a-select
                style="width: 180px"
                v-model="filterOption.filterCondition.value"
                placeholder="请选择过滤值"
                multiple
                :max-tag-count="4"
                allow-clear
                allow-search
              >
                <template #header>
                  <div style="padding: 6px 12px">
                    <a-checkbox value="1" @change="allSelect">全选</a-checkbox>
                  </div>
                </template>
                <a-option
                  v-for="item in filterOption.enum.content"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                />
              </a-select>
              <!--              <a-checkbox v-model="filterOption.filterCondition.exclude">排除选择的数据</a-checkbox>-->
            </a-space>
          </template>
          <a-space>
            <a-button size="small" type="outline" @click="enumFormVisible = true"> 选择枚举 </a-button>
            <a-button
              size="small"
              status="danger"
              type="outline"
              @click="getEnumList(currentComponent.data, enumField.field)"
            >
              生成枚举
            </a-button>
            <a-button
              v-debounce
              v-if="filterOption.enum.content.length"
              size="small"
              type="outline"
              status="success"
              @click="saveEnum"
            >
              保存枚举到系统
            </a-button>
          </a-space>
        </a-space>
      </a-form-item>
      <a-modal
        title="选择枚举"
        :footer="false"
        v-model:visible="enumFormVisible"
        width="80%"
        draggable
        unmount-on-close
      >
        <enum style="height: 400px; width: 100%" is-component v-model="enumForm" />
      </a-modal>
    </template>
    <template v-if="filterOption.type === 'date'">
      <a-form-item label="展示类型">
        <a-radio-group v-model="filterOption.filterType">
          <a-radio value="1">单日期</a-radio>
          <a-radio value="2">日期区间</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="展示格式">
        <a-radio-group v-model="filterOption.date.type">
          <a-radio value="day">日期选择</a-radio>
          <a-radio value="month">月份选择</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="过滤形式">
        <a-radio-group v-model="filterOption.filterForm">
          <a-radio value="1">相对时间</a-radio>
          <a-radio value="2">固定时间</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-checkbox v-model="filterOption.isDefault">设置默认值</a-checkbox>
      <template v-if="filterOption.isDefault">
        <template v-if="filterOption.filterForm === '1'">
          <a-form-item label="开始时间">
            <a-space fill size="small">
              <a-select
                size="small"
                v-model="filterOption.date.startDate.dateType"
                :options="dateTypeMode"
                tips="日期类型"
              />
              <a-select size="small" v-model="filterOption.date.startDate.dateRelative" tips="计算">
                <a-option value="-">-</a-option>
                <a-option value="+">+</a-option>
              </a-select>
              <a-input-number
                style="width: 60px"
                size="small"
                min="0"
                v-model="filterOption.date.startDate.dateValue"
                placeholder="请输入数值"
                tips="天数"
                @change="dateValueChange($event, 'startDate')"
              />
              <a-select
                v-if="filterOption.filterType === '1'"
                size="small"
                v-model="filterOption.filterCondition.function[0]"
                tips="过滤条件"
              >
                <a-option
                  v-for="item in condition.DATETIME"
                  :key="item.function"
                  :value="item.function"
                  :label="item.label"
                />
              </a-select>
              <component
                :is="`a-${filterOption.date.type === 'day' ? 'date' : filterOption.date.type}-picker`"
                tips="对应日期"
                size="small"
                @change="dateDayChange($event, 'startDate')"
                v-model="filterOption.date.startDate.dateDay"
              />
            </a-space>
          </a-form-item>
          <a-form-item label="结束时间" v-if="filterOption.filterType === '2'">
            <a-space size="small">
              <a-select
                size="small"
                v-model="filterOption.date.endDate.dateType"
                :options="dateTypeMode"
                tips="日期类型"
              />
              <a-select size="small" v-model="filterOption.date.endDate.dateRelative" tips="计算">
                <a-option value="-">-</a-option>
                <a-option value="+">+</a-option>
              </a-select>
              <a-input-number
                style="width: 60px"
                size="small"
                min="0"
                v-model="filterOption.date.endDate.dateValue"
                placeholder="请输入数值"
                tips="天数"
                @change="dateValueChange($event, 'endDate')"
              />
              <a-select
                v-if="filterOption.filterType === '1'"
                size="small"
                v-model="filterOption.filterCondition.function[1]"
                placeholder="请选择过滤条件"
                tips="过滤条件"
              >
                <a-option
                  v-for="item in condition.DATETIME"
                  :key="item.function"
                  :value="item.function"
                  :label="item.label"
                />
              </a-select>
              <component
                :is="`a-${filterOption.date.type === 'day' ? 'date' : filterOption.date.type}-picker`"
                tips="对应日期"
                size="small"
                @change="dateDayChange($event, 'endDate')"
                v-model="filterOption.date.endDate.dateDay"
              />
            </a-space>
          </a-form-item>
        </template>
        <template v-if="filterOption.filterForm === '2'">
          <a-form-item label="过滤条件">
            {{ filterOption.filterCondition.value }}
            <template v-if="filterOption.filterType === '2'">
              <a-range-picker v-model="filterOption.filterCondition.value" />
            </template>
            <a-space v-else size="small" separator="-" align="center">
              <a-select
                size="small"
                style="width: 150px"
                v-model="filterOption.filterCondition.function[0]"
                placeholder="请选择过滤条件"
                tips="过滤条件"
              >
                <a-option
                  v-for="item in condition.DATETIME"
                  :key="item.function"
                  :value="item.function"
                  :label="item.label"
                />
              </a-select>
              <a-date-picker
                size="small"
                v-model="filterOption.filterCondition.value[0]"
                type="date"
                placeholder="开始日期"
                tips="开始日期"
              />
            </a-space>
          </a-form-item>
        </template>
      </template>
    </template>
  </a-form>
</template>

<script setup>
import { condition, dateTypeMode } from "@/utils/dict"
import { getEnumList, enumList } from "@/hooks/useDataCube"
import Enum from "@/views/datasource/cube/enum.vue"
import dayjs from "@/utils/day.js"
import cube from "@/views/datasource/api/cube.js"
import { Message } from "@arco-design/web-vue"
const filterOption = defineModel("filter")
const currentComponent = defineModel("currentComponent")
const enumFormVisible = ref(false)
const enumForm = ref({})
watch(enumForm, (val) => {
  filterOption.value.enum.content.value = val.content
  filterOption.value.enum.code = val.code
  filterOption.value.enum.content = val.content
  enumFormVisible.value = false
})

watch(
  () => filterOption.value.type,
  (val) => {
    filterOption.value.filterCondition.value = []
    if (val === "input") {
      filterOption.value.filterCondition.function[0] = "like"
    }
    if (val === "date") {
      filterOption.value.filterCondition.function[0] = ">="
    }
  }
)

watch(
  () => filterOption.value.date.type,
  (val) => {
    filterOption.value.date.startDate.dateType = val
  }
)

watch(
  () => enumList.value,
  (val) => {
    filterOption.value.enum.content = val
  }
)
// 全选
const allSelect = (val) => {
  if (val) {
    filterOption.value.filterCondition.value = filterOption.value.enum.content.value.map((v) => v.value)
  } else {
    filterOption.value.filterCondition.value = []
  }
}

const dateValueChange = (val, type = "startDate") => {
  filterOption.value.date[type].dateDay = dayjs.operateDay(
    val,
    filterOption.value.date.startDate.dateRelative,
    filterOption.value.date.startDate.dateType
  )
}
const dateDayChange = (val, type = "startDate") => {
  const dateValue = dayjs.getDistanceDay(val, filterOption.value.date[type].dateType)
  if (dateValue < 0) {
    filterOption.value.date[type].dateRelative = "-"
    filterOption.value.date[type].dateValue = Math.abs(dateValue)
  } else {
    filterOption.value.date[type].dateRelative = "+"
    filterOption.value.date[type].dateValue = Math.abs(dateValue)
  }
}

const enumField = computed(() => {
  return currentComponent.value.data.fields.find((v) => v.fieldId === currentComponent.value.field)
})

const saveEnum = () => {
  const params = {
    code:
      currentComponent.value.field + currentComponent.value.data.datasource_id + currentComponent.value.data.cube_id,
    content: enumList.value,
    name: currentComponent.value.fieldQuery.title,
    field: currentComponent.value.fieldQuery.field,
    datasource_id: currentComponent.value.data.datasource_id,
    cube_id: currentComponent.value.data.cube_id
  }
  cube.dataCubeSaveEnum(params).then((res) => {
    filterOption.value.enum.code = params.code
    Message.success(res.message)
  })
}
</script>

<style scoped lang="less"></style>
